<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <meta charset="utf-8">
    <title>login</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <!-- 引入 Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resource/layui/css/layui.css" media="all">
    <script src="${pageContext.request.contextPath}/resource/js/jquery.js"></script>
    <style>
        .login_body{
            background-color: #F2F2F2;
        }
    </style>

</head>



<body class="login_body">
    <div >
        <div class="layui-row">
            <div class="layui-col" style="margin-top: 20%">
            <div class="layui-card" style="margin-right: 35%;margin-left: 35%">
                <div class="layui-card-header" style="font-size: medium">登陆</div>
                <div class="layui-card-body">
                    <form style="" class="layui-form" action="${pageContext.request.contextPath}/employees/login" method="post">
                        <div class="layui-form-item input-item">
                            <label class="layui-form-label" for="name">姓名</label>
                            <div class="layui-input-block">
                                <input id="name" style="width: auto" type="text" name="name" lay-verify="title" autocomplete="off" placeholder="请输入姓名" class="layui-input" onblur="a1()">
                            </div>
                        </div>
                        <div class="layui-form-item input-item">
                            <label class="layui-form-label" for="password">密码框</label>
                            <div class="layui-input-block">
                                <input id="password" style="width: auto" type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input" onblur="a2()">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="submit" class="layui-btn" lay-submit="">立即提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        </div>
    </div>

    <script src="/resource/layui/layui.js"></script>
    <script src="../js/cache.js"></script>
    <script src="../js/login.js"></script>
    <script>
        layui.use(['form', 'layedit', 'laydate'], function(){
            var form = layui.form
                ,layer = layui.layer
                ,layedit = layui.layedit
                ,laydate = layui.laydate;

            //日期
            laydate.render({
                elem: '#date'
            });
            laydate.render({
                elem: '#date1'
            });

            //创建一个编辑器
            var editIndex = layedit.build('LAY_demo_editor');

            //自定义验证规则
            form.verify({
                title: function(value){
                    if(value.length < 5){
                        return '标题至少得5个字符啊';
                    }
                }
                ,pass: [
                    /^[\S]{6,12}$/
                    ,'密码必须6到12位，且不能出现空格'
                ]
                ,content: function(value){
                    layedit.sync(editIndex);
                }
            });

            //监听指定开关
            form.on('switch(switchTest)', function(data){
                layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
                    offset: '6px'
                });
                layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
            });

            //监听提交
            form.on('submit(demo1)', function(data){
                layer.alert(JSON.stringify(data.field), {
                    title: '最终的提交信息'
                })
                return false;
            });


            //表单取值
            layui.$('#LAY-component-form-getval').on('click', function(){
                var data = form.val('example');
                alert(JSON.stringify(data));
            });

        });
    </script>
    <script>
    layui.use(['form','jquery','element', 'layer'], function(){
        var element = layui.element;
        var layer = layui.layer;
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer
        $ = layui.jquery;

        //监听折叠
        element.on('collapse(test)', function(data){
            layer.msg('展开状态：'+ data.show);
        });

        //表单输入效果
        $(".login_body .input-item").click(function (e) {
            e.stopPropagation();
            $(this).addClass("layui-input-focus").find(".layui-input").focus();
        })
        $(".loginBody .layui-form-item .layui-input").focus(function(){
            $(this).parent().addClass("layui-input-focus");
        })
        $(".loginBody .layui-form-item .layui-input").blur(function(){
            $(this).parent().removeClass("layui-input-focus");
            if($(this).val() != ''){
                $(this).parent().addClass("layui-input-active");
            }else{
                $(this).parent().removeClass("layui-input-active");
            }
        })
    });
</script>
</body>
</html>
